<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="content-type"        content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type"  content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<title>jQuery.drawer</title>
<link href="drw/styles.css" rel="stylesheet" media="all" />
<script src="drw/jquery.js" type="text/javascript"></script>
<script src="drw/scripts.js" type="text/javascript"></script>
<style type="text/css">
body {
	font-family    : "Lucida Grande", "Arial", sans-serif;
	background     : #222222;
	padding        : 20px 0 0 0;
	margin         : 0;
}

div#content {
	color          : #ffffff;
	background     : #000000;
}

div#info {
	padding        : 0 30px 30px 30px;
}

div#info h1 {
	font-size      : 36px;
	font-weight    : bold;
	padding        : 30px 0 0 0;
	margin         : 0;
}

div#info h2 {
	font-size      : 20px;
	font-weight    : bold;
	border-top     : 1px solid #111111;
	padding        : 30px 0 0 0;
	margin         : 30px 0 0 0;
}

div#info p {
	font-size      : 12px;
	line-height    : 1.6;
	padding        : 10px 0 0 0;
	margin         : 0;
}

div#info a {
	color          : #ffffff;
}

div#info pre {
	font-size      : 11px;
	font-family    : "Courier New", monospace;
	line-height    : 1.4;
	color          : #99ff99;
	background     : #222222;
	padding        : 10px;
	margin         : 10px 0;
}

div#info em {
	font-style     : normal;
	color          : #ff0099;
}

div.sample p {
	font-size      : 24px;
	font-weight    : bold;
	line-height    : 1.6;
	color          : #ffff00;
	padding        : 20px;
	margin         : 0;
}
</style>
</head>
<body>



<!--============= DRAWER ============-->
<ul id="drw_tabs">
	<li><a href="#hello" rel="drw">Hello</a></li>
	<li><a href="#sample_icon" rel="drw">Icon View</a></li>
	<li><a href="#sample_list" rel="drw">List View</a></li>
	<li><a href="sample_ajax.html" rel="drw">Ajax</a></li>
	<li><a href="http://www.google.com/" target="_blank">No Drawer</a></li>
</ul>
<!--============ /DRAWER ============-->



<div id="content">
<div id="drw"></div>
<div id="info">
<div>
	<h1>jQuery.drawer</h1>
	<p>
		jQuery.drawer is a <a href="http://jquery.com/">jQuery</a>-based, drawer style navigation.<br />
		Look at how the header navigation of this page works
	</p>
</div>
	
	

<div>
	<h2>Download</h2>
	<p>
		<a href="http://src.metatype.jp/jquery_drawer_1.00.zip">jQuery.drawer v1.00</a><br />
		Everyone can use it under the MIT-style license.
	</p>
</div>
	
	

<div>
	<h2>Settings</h2>
	<p>
		Load dependencies in the header element of HTML.
	</p>
	<pre>&lt;link href="drw/styles.css" rel="stylesheet" media="all" /&gt;
&lt;script src="drw/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="drw/scripts.js" type="text/javascript"&gt;&lt;/script&gt;</pre>
	<p>
		Set the code where you want to display jQuery.drawer's tabs.<br />
		A link tag with a rel="<em>drw</em>" attribute activates jQuery.drawer.<br />
		If you need more tabs, add a list item element.<br />
		JavaScript automatically make the width of each tab the equal.<br />
		See a <a href="sample_flexible.html">Flexible Sample</a> when you use it with a flexible layout.
	</p>
	<pre>&lt;ul id="drw_tabs"&gt;
	&lt;li&gt;&lt;a href="#<em>the ID of HTML element</em>" rel="<em>drw</em>"&gt;label of this tab&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#<em>the ID of HTML element</em>" rel="<em>drw</em>"&gt;label of this tab&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#<em>the ID of HTML element</em>" rel="<em>drw</em>"&gt;label of this tab&lt;/a&gt;&lt;/li&gt;
	...
&lt;/ul&gt;</pre>
	<p>
		Set the code where you want to display jQuery.drawer.
	</p>
	<pre>&lt;div id="drw"&gt;&lt;/div&gt;</pre>
</div>



<div>
	<h2>How to use</h2>
	<p>
		Set a "href" attribute of link tag in jQuery.drawer's tabs to <em>the ID of HTML element</em>.<br />
		The HTML element will display in jQuery.drawer.<br />
		<br />
		For example:<br />
		In that case jQuery.drawer display the HTML element of ID "hello".
	</p>
	<pre>&lt;ul id="drw_tabs"&gt;
	&lt;li&gt;&lt;a href="#<em>hello</em>" rel="<em>drw</em>"&gt;Hello&lt;/a&gt;&lt;/li&gt;
	...
&lt;/ul&gt;

...

&lt;div id="<em>hello</em>"&gt;
	&lt;p&gt;Hello jQuery.drawer!&lt;/p&gt;
&lt;/div&gt;</pre>
</div>



<div>
	<h2>Icon &amp; List View</h2>
	<p>
		jQuery.drawer provides 2 content styles in default.<br />
		<br />
		"Icon View" is a item list with icon.<br />
		Use element &lt;ul&gt; with class name "drw_icon_view".<br />
		The format of Icon View:
	</p>
	<pre>&lt;ul class="drw_icon_view"&gt;
	&lt;li&gt;
		&lt;div class="drw_img"&gt;&lt;img src="<em>item's icon</em>" /&gt;&lt;/div&gt;
		&lt;div class="drw_info"&gt;
			&lt;h6&gt;&lt;a href="<em>item's link</em>"&gt;<em>item's title</em>&lt;/a&gt;&lt;/h6&gt;
			&lt;p&gt;<em>item's description</em>&lt;/p&gt;
		&lt;/div&gt;
	&lt;/li&gt;
	...
&lt;/ul&gt;</pre>
	<p>
		"List View" is a simple item list.<br />
		Use element &lt;ul&gt; with class name "drw_list_view".<br />
		The format of List View:
	</p>
	<pre>&lt;ul class="drw_list_view"&gt;
	&lt;li&gt;
		&lt;a href="<em>item's link</em>"&gt;
			&lt;span class="drw_title"&gt;<em>item's title</em>&lt;/span&gt;
			&lt;span class="drw_desc"&gt;<em>item's description</em>&lt;/span&gt;
			&lt;span class="drw_date"&gt;<em>item's date</em>&lt;/span&gt;
		&lt;/a&gt;
	&lt;/li&gt;
	...
&lt;/ul&gt;</pre>
</div>



<div>
	<h2>Ajax</h2>
	<p>
		jQuery.drawer can load source code of external file with Ajax.<br />
		
		Set a "href" attribute of link tag in jQuery.drawer's tabs to <em>the URL of external file</em>.<br />
		The source code of external file will display in jQuery.drawer.<br />
		<br />
		For example:<br />
		In that case jQuery.drawer display source code of "sample_ajax.html".
	</p>
	<pre>&lt;ul id="drw_tabs"&gt;
	&lt;li&gt;&lt;a href="<em>sample_ajax.html</em>" rel="<em>drw</em>"&gt;Hello&lt;/a&gt;&lt;/li&gt;
	...
&lt;/ul&gt;</pre>
</div>



<div>
	<h2>Author</h2>
	<p>
		inamorix@metatype.jp<br />
		Copyright &copy; 2008 <a href="http://metatype.jp/">metatype</a>, All rights reserved.
	</p>
</div>
</div>
</div>



<div id="hello" class="sample">
	<p>Hello jQuery.drawer!</p>
</div>



<ul id="sample_icon" class="drw_icon_view">
	<li>
		<div class="drw_img"><img src="sample.gif" alt="sample" /></div>
		<div class="drw_info">
			<h6><a href="#">item's title</a></h6>
			<p>item's description is here. item's description is here.</p>
		</div>
	</li>
	<li>
		<div class="drw_img"><img src="sample.gif" alt="sample" /></div>
		<div class="drw_info">
			<h6><a href="#">item's title</a></h6>
			<p>item's description is here. item's description is here.</p>
		</div>
	</li>
	<li>
		<div class="drw_img"><img src="sample.gif" alt="sample" /></div>
		<div class="drw_info">
			<h6><a href="#">item's title</a></h6>
			<p>item's description is here. item's description is here.</p>
		</div>
	</li>
	<li>
		<div class="drw_img"><img src="sample.gif" alt="sample" /></div>
		<div class="drw_info">
			<h6><a href="#">item's title</a></h6>
			<p>item's description is here. item's description is here.</p>
		</div>
	</li>
	<li>
		<div class="drw_img"><img src="sample.gif" alt="sample" /></div>
		<div class="drw_info">
			<h6><a href="#">item's title</a></h6>
			<p>item's description is here. item's description is here.</p>
		</div>
	</li>
	<li>
		<div class="drw_img"><img src="sample.gif" alt="sample" /></div>
		<div class="drw_info">
			<h6><a href="#">item's title</a></h6>
			<p>item's description is here. item's description is here.</p>
		</div>
	</li>
</ul>



<ul id="sample_list" class="drw_list_view">
	<li>
		<a href="#">
			<span class="drw_title">item's title</span>
			<span class="drw_desc">item's description is here. item's description is here.</span>
			<span class="drw_date">2008.05.01</span>
		</a>
	</li>
	<li>
		<a href="#">
			<span class="drw_title">item's title</span>
			<span class="drw_desc">item's description is here. item's description is here.</span>
			<span class="drw_date">2008.05.01</span>
		</a>
	</li>
	<li>
		<a href="#">
			<span class="drw_title">item's title</span>
			<span class="drw_desc">item's description is here. item's description is here.</span>
			<span class="drw_date">2008.05.01</span>
		</a>
	</li>
	<li>
		<a href="#">
			<span class="drw_title">item's title</span>
			<span class="drw_desc">item's description is here. item's description is here.</span>
			<span class="drw_date">2008.05.01</span>
		</a>
	</li>
</ul>



</body>
</html>